<template>
    <div>
        <div id="example-1" style="text-align: left">
            <button-container/>
        </div>
        <div id="example-2" style="text-align: left">
            <button-container/>
            <button-container/>
            <button-container/>
        </div>
        <hr/>
        <div id="example-3" :style="{fontSize:postFontSize + 'em'}">
            <blog_post style="text-align: left"
                       v-on:enlarge-text="postFontSize += $event"
                       v-for="post in posts"
                       :key="post.id"
                       :post="post"></blog_post>
        </div>
        <hr/>
        <div id="example-4">
            <custom_input v-model="searchText"></custom_input>
        </div>
        <hr/>
        <div id="example-5">
            <alert_box>内存泄漏问题</alert_box>
        </div>
        <hr/>
        <div id="example-6">
            <Counter example-property="HelloWorld"/>
        </div>
    </div>

</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator'
import Counter from "../my-component/Counter.vue";
Vue.component("button-container",{
    data(){
        return {count:0}
    },
    template:'<button v-on:click="count++">you click me {{count}} times</button>'
});
Vue.component("blog_post",{
    props:["post"],
    template:"<div class='blogPost'><h3>{{post.title}}</h3><button v-on:click='$emit(\"enlarge-text\",0.1)'>Enlarge text</button><div v-html='post.content'></div></div>"
});
Vue.component("custom_input",{
    props:["value"],
    template:`
        <input
          v-bind:value="value"
          v-on:input="$emit('input',$event.target.value)">
    `
});
Vue.component("alert_box",{
    template:`
        <div class="demo-alert-box">
            <strong>Error!!!</strong>
            <slot></slot>
        </div>
    `
})

@Component({
    components:{Counter}
})
export default class ComponentBasics extends Vue {
    name = 'ComponentBasics';
    posts = [
        { id: 1, title: 'My journey with Vue',content:'然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 <code>every component must have a single root element</code> (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题' },
        { id: 2, title: 'Blogging with Vue',content:'最近服务遇到了内存泄漏问题，运维同学紧急呼叫解决，于是在解决问题之余也系统记录了下内存泄漏问题的常见解决思路。 本文分享自华为云社区<a href="javascript();">《python内存泄漏排查小技巧》</a>，作者：<b>lutianfei</b>。 最近服务遇到了内存泄漏问题，运维同学紧急呼叫解决，于是在解决问题之余也系统记录了下内存泄漏问题的常' },
        { id: 3, title: 'Why Vue is so fun',content:'前言 本文讲述了JS常用的几种数组遍历方式以及性能分析对比。 如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新的文章～ 数组的方法 JavaScript发展到现在已经提供了许多数组的方法，下面这张图涵盖了数组大部分的方法，这篇文章主要说一说数组' }
    ];
    postFontSize = 1;
    searchText = "请输入搜索内容";
}
</script>

<style scoped>
.demo-alert-box{
    padding: 10px 20px;
    background: #f3beb8;
    border: 1px solid #f09898;
}
</style>
